<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    @close = '$emit("update:dialogVisible", false)'
    :top='setTop'>

    <section class="vacationTable-dialog-body">
      <div class="select">
        <el-select v-model='type' placeholder="假期类型" clearable>
          <el-option  v-for='(k,i) in typeList' :value='k.name'>
          </el-option>
        </el-select>
          &nbsp;
        <el-select v-model ='status'  placeholder="假期状态" clearable>
          <el-option v-for='(k,i) in statusList' :value='k.name'>
          </el-option>
        </el-select>
      </div>

      <div class="content">
        <h2 v-if='!status && this.datasFilter.length'> 
          <strong>{{searchOption.start}} 至 {{searchOption.end}}</strong>
          <span>{{status}}的{{type || '所有假期'}} </span>
          共 {{totalDays}} / 
          <span class="blue">{{actuallyDays}} 天</span>
        </h2>
        <h2 v-if='status && this.datasFilter.length'> 
          <strong>{{searchOption.start}} 至 {{searchOption.end}}</strong>
          <span>{{status}}的{{type || '所有假期'}}</span>
          共 {{totalDays}} 天
        </h2>

        <div class="noData" v-if='!datasFilter.length'>
          {{noDataTip}}
        </div>
        <p v-else class="datailList" v-for='(k,i) in datasFilter'>
          <span class="type">{{k.process_type}}</span> <span class="day">共 {{k.leave_day | removeZero}} 天</span> <span class="date">{{k.business_start_time}}&nbsp;{{k.effeStartSign}}&nbsp;&nbsp;-&nbsp;&nbsp;</span><span class="date">{{k.business_end_time}}&nbsp;{{k.effeEndSign}}</span><span class="status" :class='setStatusColor(k.process_status)'>{{k.process_status}}</span>
        </p>
      </div>
    </section>

    <span slot="footer">
      <el-button type="success" style="margin-top:-50px;margin-right:20px" @click.stop='downLoad'>导出Excel</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'

export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		dialogData: {
			type: Array,
			default: [],
			require: true
		},
		peopleName: {
			type: String,
			default: ''
		},
		searchOption: {
			type: Object,
			default: {}
		},
		emplid:{
			type:String,
			default:''
		}
	},
	data () {
		return {
			visible: false,
			datas: [],
			status: '',
			statusList: [{
				name: '已驳回',
				code: ''
			},
			{
				name: '审批中',
				code: ''
			},
			{
				name: '已完成',
				code: ''
			}],
			type: '',
			typeList: [],
			noDataTip: ''
		}
	},
	filters: {
		removeZero (value) {
			return parseFloat(value)
		}
	},
	computed: {

		title () {
			return `${this.peopleName}的请假详情`
		},
		//实际请假天数
		actuallyDays () {

			let count = 0
			if (this.type) {
				this.datas.filter(ele => ele.process_status !== '已驳回').filter(ele => ele.process_type == this.type).forEach(ele => count += parseFloat(ele.leave_day))
			} else {
				this.datas.filter(ele => ele.process_status !== '已驳回').forEach(ele => count += parseFloat(ele.leave_day))
			}
			return count
		},

		datasFilter () {
			if (this.type && this.status) {
				this.noDataTip = `暂无${this.status}的${this.type}记录`
				return this.datas.filter(ele => ele.process_type == this.type).filter(ele => ele.process_status == this.status)
			} else if (this.type) {
				this.noDataTip = `暂无${this.type}记录`
				return this.datas.filter(ele => ele.process_type == this.type)
			} else if (this.status) {
				this.noDataTip = `暂无${this.status}的记录`
				return this.datas.filter(ele => ele.process_status == this.status)
			}
			return this.datas
		},

		totalDays () {
			let conunt = 0
			this.datasFilter.forEach(element => {
				conunt += parseFloat(element.leave_day)
			})
			return conunt
		},

		setTop () {
			if (this.datasFilter.length >= 4) {
				return '6vh'
			}
			return '14vh'
		},
		status_number () {
			// 0 已驳回
			// 1已完成
			// 2 审批中
			switch (this.status) {
			case '已完成':
				return '1'
				break
			case '审批中':
				return '2'
				break
			case '已驳回':
				return '0'
				break
			default: 
				return ''
				break
			}
		}

	},
	watch: {
		dialogVisible (newValue) {
			this.visible = newValue
		},
		dialogData: {
			handler (newVal) {
				this.datas = newVal
			},
			deep: true
		}
	},
	methods: {
		downLoad () {
			if (!this.datasFilter.length) {
				Message.warning('暂无数据,无法导出')
				return
			}
			const params = {
				start: this.searchOption.start,
				end: this.searchOption.end,
				name: this.emplid,
				departmentCode: this.searchOption.selected,
				process_type: this.type,
				process_status: this.status_number
			}
			window.location.href = this.Axios.baseURI + '/vacationReport/employeeExport' + '?employeeCode=' + params.name + '&endTime=' + params.end + '&startTime=' + params.start + '&token=' + localStorage.getItem('token') + '&departmentCode=' + params.departmentCode + '&process_type=' + params.process_type + '&process_status=' + params.process_status
		},
		setStatusColor (status) {
			switch (status) {
			case '已完成':
				return 'green'
				break
			case '已驳回':
				return 'red'
				break
			default:
				return 'blue'
				break
			}
		},
		setDialogSelectList () {
			this.Axios.Post('/leaveType/findHolidayTypeList')
				.then((res) => {
					this.typeList = res.data.datas
				})
		}
	},

	mounted () {
		// this.setDialogSelectList()
	}

}
</script>

<style scoped lang='less'>
.vacationTable-dialog-body {
  .select {
    text-align: center;
  }
  .content {
    margin-top: 20px;
    max-height: 340px;
    min-height: 200px;
    overflow: auto;
    h2 {
      font-weight: normal;
      padding: 15px 2px;
      text-align: center;
      font-size: 16px;
      .blue {
        color: #38f;
      }
    }

    .noData {
      letter-spacing: 1px;
      text-align: center;
      font-size: 16px;
      padding-top: 50px;
      font-weight: 550;
    }

    .datailList {
      line-height: 2;
      padding: 10px 20px;
      margin: 0 20px;
      border-top: 1px solid #e9e9e9;
      overflow: hidden;
      & > span {
        float: left;
      }
      & > .status {
        float: right;
      }
      & > .type {
        font-weight: bold;
        font-size: 14px;
        margin-right: 40px;
      }

      & > .day {
        font-size: 14px;
        margin-right: 40px;
        font-weight: bold;
        width: 80px;
      }

      & > .date {
        color: rgb(175, 175, 175);
      }

      & > .status.green {
        color: rgb(50, 198, 5);
      }
      & > .status.red {
        color: rgb(227, 53, 53);
      }

      & > .status.blue {
        color: #38f;
      }
    }
  }
}
</style>